<!DOCTYPE html>
<!-- saved from url=(0034)https://chumanapp.com/college.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta property="og:image" content="//www.chumanapp.com/img/chuman_logo.png">
    <meta itemprop="image" content="http://qnp.chumanapp.com/commonPic/icon750_2019.png">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta content="触漫,漫画创作,AVG创作,动漫社区,Z世代,免费漫画,文字游戏,免费小说,我与秋田,王爷的小兔妖,稿费,投稿,游戏制作,成名,出名" name="keywords">
    <meta content="触漫-超好玩的泛二次元创作社区，拥有独特的换装系统和编辑器，用户可轻松定制个性虚拟形象；低门槛创建漫画、漫剧等多样化虚拟内容；加入各种社团，以虚拟身份在触漫进行直播、阅读、交友扩列等活动；还提供了连麦、虚拟形象直播、扭蛋抽卡更多互动玩法。平台目前已经沉淀百万部漫画、点读式小说，在全网持续产出阅读量破十亿的IP作品。培育上百个KOL大触，打通了从UGC到PUGC的IP孵化产业链，并与华丰、洽洽等多个快消品牌达成IP跨界合作。" name="description">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>触漫-触漫学堂</title>
    <link rel="stylesheet" href="./college_files/reset.css">
    <link rel="stylesheet" href="./college_files/qiniuplayer.min.css">
    <link rel="stylesheet" href="./college_files/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="./college_files/college.css">
    <!-- <link rel="stylesheet" href="./css/memorial.css" /> -->
  <style type="text/css">.qplayer, .qplayer * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.qplayer button {
    background: none;
    border: none;
    outline: none;
    border-radius: 0;
  }

.qplayer, .qplayer-wrapper, .qplayer-video {
  width: 100%;
  height: 100%;
}

.qplayer {
  position: relative;
}

.qplayer-wrapper {
  position: absolute;
  cursor: pointer;
  top: 0;
  z-index: 2;
  background: #000;
  left: 0;
}

.qplayer-error {
  width: 100%;
  height: 100%;
  position: absolute;
  flex-direction: column;
  justify-content: center;
  background: #000;
  display: none
}

.qplayer-error.qplayer-active {
    display: flex;
  }

.qplayer-error-title {
  color: #ff0000;
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
}

.qplayer-error-content {
  color: rgba(255, 255, 255, .6);
  text-align: center;
  font-size: 14px;
}

.qplayer-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: -1;
  transition: opacity ease 0.2s
}

.qplayer-loading.qplayer-active {
    opacity: 1;
    z-index: 1;
  }

.qplayer-controlswrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.qplayer-controls {
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  transition: opacity ease 0.1s, -webkit-transform ease 0.2s;
  transition: transform ease 0.2s, opacity ease 0.1s;
  transition: transform ease 0.2s, opacity ease 0.1s, -webkit-transform ease 0.2s;
  -webkit-transform: translateY(38px);
          transform: translateY(38px);
  pointer-events: none
}

.qplayer-controls.qplayer-active {
    pointer-events: auto;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }

.qplayer-center-btn {
  position: absolute;
  width: 80px;
  height: 80px;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  background: rgba(0, 0, 0, .5) !important;
  border-radius: 50% !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity ease 0.2s;
  cursor: pointer;
  z-index: 3
}

.qplayer-center-btn.qplayer-active {
    opacity: 1;
    pointer-events: auto;
  }

.qplayer-center-btn img {
    position: absolute;
    left: calc(50% - 15px);
    top: calc(50% - 15px);
    width: 30px;
    height: 30px;
  }

.qplayer-gesture-wrapper {
  width: 100%;
  height: calc(100% - 40px);
  position: absolute;
  top: 0;
  left: 0;

}

.qplayer-gesture-tips {
  width: 150px;
  height: 80px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .5);
  position: absolute;
  left: calc(50% - 75px);
  top: calc(50% - 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

.qplayer-gesture-volume-wrapper {
  width: 120px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .4);
  overflow: hidden;
}

.qplayer-gesture-volume-current {
  height: 100%;
  background: #fff;
  border-radius: 6px;
}

.qplayer-gesture-seek-text {
  color: #fff;
  font-size: 26px;
}

.qplayer-gesture-seek-text span {
    margin: 0 2px;
    font-size: 20px;
    color: rgba(255, 255, 255, .6);
  }

.qplayer-playbtn {
  position: relative;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.qplayer-play, .qplayer-pause {
  position: absolute !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity ease 0.2s
}

.qplayer-play.qplayer-active, .qplayer-pause.qplayer-active {
    pointer-events: auto;
    opacity: 1;
  }

.qplayer-time {
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  width: 44px;
  text-align: center;
}

.qplayer-fullscreen {
  display: flex;
  align-items: center;
}

.qplayer-controlbtns {
  padding: 8px 12px 0px 12px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.qplayer-controlbtns button {
  }

.qplayer-blank {
  flex: 1;
}

.qplayer-volume {
  position: absolute;
  bottom: 0;
  z-index: 2
}

.qplayer-volume:hover .qplayer-sidewrapper {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
    height: 120px;
    margin-bottom: 10px;
  }

.qplayer-volumewrapper {
  height: 100%;
  width: 24px;
  margin-right: 15px;
  position: relative;
}

.qplayer-sidewrapper {
  opacity: 0;
  height: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity ease 0.3s;
  width: 30px;
  border-radius: 4px;
  overflow: hidden;
}

.qplayer-volume_side {
  justify-content: space-around;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 13px;
  background: rgba(0, 0, 0, .7);
  padding: 5px;
  height: 120px;
}

.qplayer-volumebtn {
  width: 30px;
  height: 20px;
  margin-bottom: 6px;
}

.qplayer-volumebtn img {
    width: 100%;
    height: 100%;
  }

.qplayer-settings-btn {
  margin-right: 10px;
  height: 20px;
}


.qplayer-controller-slot {
  margin-right: 10px;
}


.qplayer-controller-slot button {
    color: #fff;
    cursor: pointer;
  }
</style><style type="text/css">button[data-balloon] {
  overflow: visible; }

[data-balloon] {
  position: relative;
  cursor: pointer; }
  [data-balloon]:after {
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 0.1s ease-out 0.1s;
    font-family: sans-serif !important;
    font-weight: normal !important;
    font-style: normal !important;
    text-shadow: none !important;
    font-size: 12px !important;
    background: rgba(17, 17, 17, 0.9);
    border-radius: 4px;
    color: #fff;
    content: attr(data-balloon);
    padding: .5em 1em;
    position: absolute;
    white-space: nowrap;
    z-index: 1; }
  [data-balloon]:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
    background-size: 100% auto;
    width: 18px;
    height: 6px;
    filter: alpha(opacity=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 0.1s ease-out 0.1s;
    content: '';
    position: absolute;
    z-index: 1; }
  [data-balloon]:hover:before, [data-balloon]:hover:after, [data-balloon][data-balloon-visible]:before, [data-balloon][data-balloon-visible]:after {
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    pointer-events: auto; }
  [data-balloon].font-awesome:after {
    font-family: FontAwesome; }
  [data-balloon][data-balloon-break]:after {
    white-space: pre; }
  [data-balloon][data-balloon-blunt]:before, [data-balloon][data-balloon-blunt]:after {
    transition: none; }
  [data-balloon]:after {
    bottom: 100%;
    left: 50%;
    margin-bottom: 11px;
    -webkit-transform: translate(-50%, 10px);
    transform: translate(-50%, 10px);
    -webkit-transform-origin: top;
    transform-origin: top; }
  [data-balloon]:before {
    bottom: 100%;
    left: 50%;
    margin-bottom: 5px;
    -webkit-transform: translate(-50%, 10px);
    transform: translate(-50%, 10px);
    -webkit-transform-origin: top;
    transform-origin: top; }
  [data-balloon]:hover:after, [data-balloon][data-balloon-visible]:after {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0); }
  [data-balloon]:hover:before, [data-balloon][data-balloon-visible]:before {
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0); }
  [data-balloon][data-balloon-length='small']:after {
    white-space: normal;
    width: 80px; }
  [data-balloon][data-balloon-length='medium']:after {
    white-space: normal;
    width: 150px; }
  [data-balloon][data-balloon-length='fit']:after {
    white-space: normal;
    width: 100%; }
</style><style type="text/css">
.qplayer[data-device="mobile"] [data-balloon]:after {
    display: none !important;
  }
  .qplayer[data-device="mobile"] [data-balloon]:before {
    display: none !important;
  }
  .qplayer[data-device="mobile"] .qplayer-volumewrapper {
    display: none;
  }
  .qplayer[data-device="mobile"] .qplayer-settings {
    width: 100% !important;
    height: 100% !important;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
  }
  .qplayer[data-device="mobile"] .qplayer-setting-close {
    position: absolute;
    right: 8px;
    top: 8px;
    display: block !important;
  }
  .qplayer[data-device="mobile"] .qplayer-setting-tab {
    height: 100% !important;
    background: none;
    -webkit-transform: translateX(100%) !important;
            transform: translateX(100%) !important
  }
  .qplayer[data-device="mobile"] .qplayer-setting-tab.qplayer-main-setting {
      -webkit-transform: translateX(-100%) !important;
              transform: translateX(-100%) !important;
    }
  .qplayer[data-device="mobile"] .qplayer-setting-tab.qplayer-active {
      -webkit-transform: translateX(0) !important;
              transform: translateX(0) !important;
    }
  .qplayer[data-device="mobile"] .qplayer-setting-header {
    display: block !important;
    width: 100%;
    color: #fff;
    font-size: 16px;
    padding: 8px;
    border-bottom: 1px solid #fff;
  }
  .qplayer[data-device="mobile"] .qplayer-subsetting {
    height: 100%;
    width: 100%;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .qplayer[data-device="mobile"] .qplayer-subsetting button {
      position: absolute;
      right: 8px;
      top: 8px;
    }
  .qplayer[data-device="mobile"] .qplayer-setting-list {
    flex: 1;
    overflow: auto;
  }
  .qplayer[data-device="mobile"] .qplayer-setting-listitem {
    padding: 8px !important;
  }
</style><style type="text/css">.qplayer-barwrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.qplayer-bar{
  width: 100%;
  margin: auto;
  height: 8px;
}

.qplayer-barcurr, .qplayer-barbuff {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.qplayer-barbuff {
}

.qplayer-indicator {
  position: absolute;
  top: -10px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.qplayer-timetooltip {
  width: 10px;
  height: 100%;
  position: absolute !important;
  z-index: 1;
}
</style><style type="text/css">.qplayer-volume_sliderwrapper {
  cursor: pointer;
  position: relative;
  height: 70px;
}

.qplayer-volume_slider, .qplayer-volume_slider_active {
  height: 100%;
  width: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .5);
  position: absolute;
  bottom: 0;
  left: calc(50% - 2px);
}

.qplayer-volume_slider_active {
  background: rgba(255, 255, 255, .9);
  height: 50%;
}

.qplayer-volume_thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fafafa;
  position: absolute;
  left: calc(50% - 7px);
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 3
}

.qplayer-volume_thumb:hover {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }</style><style type="text/css">.qplayer-setting-wrapper {
  width: 100%;
  height: 100%;
}

.qplayer-settings {
  width: 180px;
  position: absolute;
  overflow: hidden;
  bottom: 43px;
  right: 10px;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity ease 0.2s
}

.qplayer-settings.qplayer-active {
    opacity: 1;
    pointer-events: auto;
  }

.qplayer-settings span {
    color: #fff;
  }

.qplayer-setting-close {
  display: none;
}

.qplayer-setting-tab {
  border-radius: 4px;
  width: 100%;
  background: rgba(0, 0, 0, .7);
  padding: 4px 0;
  position: absolute;
  transition: -webkit-transform ease 0.2s;
  transition: transform ease 0.2s;
  transition: transform ease 0.2s, -webkit-transform ease 0.2s;
  bottom: 0;
  left: 0;
  -webkit-transform: translateX(180px);
          transform: translateX(180px)
}

.qplayer-setting-tab.qplayer-main-setting {
    -webkit-transform: translateX(-180px);
            transform: translateX(-180px);
  }

.qplayer-setting-tab.qplayer-active {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

.qplayer-setting-header {
  display: none;
}

.qplayer-setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  transition: ease background 0.2s
}

.qplayer-setting-item:hover {
    background: rgba(255, 255, 255, .2);
  }

.qplayer-setting-item-title {
  color: rgba(255, 255, 255, .8);
  font-size: 14px;

}

.qplayer-setting-item-value {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}


.qplayer-subsetting {
  padding: 4px;
}


.qplayer-subsetting button {
    margin-left: 2px;
    cursor: pointer;
  }

.qplayer-setting-list {
  list-style: none;
}

.qplayer-setting-listitem {
  cursor: pointer;
  padding: 3px;
  transition: ease background 0.2s;
  font-size: 14px;

}

.qplayer-setting-listitem span {
    color: rgba(255, 255, 255, .7);
  }

.qplayer-setting-listitem:hover {
    background: rgba(255, 255, 255, .2);
  }

.qplayer-setting-listitem .qplayer-active {
    color: #fff;
    font-weight: bold;
  }
</style><style type="text/css">.sk-fading-circle {
  position: relative;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}</style><style type="text/css">.qplayer-toast {
  background: rgba(0, 0, 0, .7);
  border-radius: 4px;
  padding: 8px;
  max-width: 300px;
  display: flex;
  align-items: center;
  z-index: 3;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  pointer-events: none;
  transition: all ease 0.2s;
  position: absolute;
  bottom: 50px;
  left: 10px
}

.qplayer-toast.qplayer-active {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

.qplayer-toast-content {
  font-size: 13px;
  color: #fff;
  word-break: break-all;
}
</style></head>
  <body>
    <h1 class="seo-logo">
      <img src="./college_files/chuman_logo.png" alt="触漫logo" style="display: none;">
    </h1>
    <div style="display: none; position: relative; z-index: 2000;">
      <img src="./college_files/chuman_logo.png" alt="logo" title="触漫-超好玩的泛二次元创作社区">
    </div>
    <div class="pcBody clearfix">
      <div class="allHeader">
        <div class="warpNav clearfix">
          <div class="Logo">
            <a href="http://www.chumanapp.com/" title="触漫-超好玩的泛二次元创作社区"><img title="触漫-超好玩的泛二次元创作社区" src="./college_files/2019sologan.png" alt=""></a>
          </div>
          <div class="navList">
            <ul>
              <li><a href="/index.html">首页</a></li>
              <li class="active"><a href="/college.html">触漫学堂</a></li>
              <li><a href="/Produce.html">触漫出品</a></li>
              <li><a href="/about.html">关于触漫</a></li>
              <!--<li><a href="./legal.html" >维权中心</a></li>-->
              <!--<li><a target="_blank" href="./painterUpLoad.html" >画师入驻</a></li>-->
              <li><a href="/contactUs.html">联系我们</a></li>
              <li>
                <a href="/platformlegalRule.html">平台规则</a>
              </li>
              <li>
                <a href="/penalize/penalize.html">处罚公告</a>
              </li>
              <!--<li><a target="_blank" href="https://qnp.chumanapp.com/grouplist/">热门佳作</a></li>-->
            </ul>
          </div>
        </div>
      </div>

      <div class="gfjc">
        <div class="title"><span>官方教程</span></div>
        <div class="slideBox">
          <div id="swiper1" class="swiper-container swiper-container-initialized swiper-container-horizontal">
            <div class="swiper-wrapper" id="gfsp" style="transform: translate3d(0px, 0px, 0px);">
              <!--<div class="swiper-slide clearfix">-->
              <!--<div class="ImgBox"><div class="fade"><span class="text">漫画制作导论</span></div></div>-->
              <!--<div class="ImgBox"><div class="fade"><span class="text">漫画制作导论</span></div></div>-->
              <!--<div class="ImgBox"><div class="fade"><span class="text">漫画制作导论</span></div></div>-->
              <!--<div class="ImgBox"><div class="fade"><span class="text">漫画制作导论</span></div></div>-->
              <!--<div class="ImgBox"><div class="fade"><span class="text">漫画制作导论</span></div></div>-->
              <!--<div class="ImgBox"><div class="fade"><span class="text">漫画制作导论</span></div></div>-->
              <!--<div class="ImgBox"><div class="fade"><span class="text">漫画制作导论</span></div></div>-->
              <!--<div class="ImgBox"><div class="fade"><span class="text">漫画制作导论</span></div></div>-->
              <!--</div>-->
            <div class="swiper-slide clearfix swiper-slide-active" style="width: 1200px;"><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/1.mp4"><img src="./college_files/1.jpg" alt=""><div class="fade"><span class="text">触漫学堂第1课——故事创作导论</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/2.mp4"><img src="./college_files/2.jpg" alt=""><div class="fade"><span class="text">触漫学堂第2课——故事创作：戴着脚镣跳舞</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/3.mp4"><img src="./college_files/3.jpg" alt=""><div class="fade"><span class="text">触漫学堂第3课——叙事角度的选择</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/4.mp4"><img src="./college_files/4.jpg" alt=""><div class="fade"><span class="text">触漫学堂第4课——漫画创作导论</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/5.mp4"><img src="./college_files/5.jpg" alt=""><div class="fade"><span class="text">触漫学堂第5课——漫画的仓鼠理论</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/6.mp4"><img src="./college_files/6.jpg" alt=""><div class="fade"><span class="text">触漫学堂第6课——什么是景别</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/7.mp4"><img src="./college_files/7.jpg" alt=""><div class="fade"><span class="text">触漫学堂第7课——什么是景深</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/8.mp4"><img src="./college_files/8.jpg" alt=""><div class="fade"><span class="text">触漫学堂第8课——故事的时间设定</span></div></div></div><div class="swiper-slide clearfix swiper-slide-next" style="width: 1200px;"><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/9.mp4"><img src="./college_files/9.jpg" alt=""><div class="fade"><span class="text">触漫学堂第9课——故事的空间设定</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/10+11.mp4"><img src="./college_files/10+11.jpg" alt=""><div class="fade"><span class="text">触漫学堂第10+11课 世界观的设定</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/12.mp4"><img src="./college_files/12.jpg" alt=""><div class="fade"><span class="text">触漫学堂第12课——期限</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/13.mp4"><img src="./college_files/13.jpg" alt=""><div class="fade"><span class="text">触漫学堂第13集——漫画的格式</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/14.mp4"><img src="./college_files/14.jpg" alt=""><div class="fade"><span class="text">触漫学堂第14课——人物创作导论</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/15.mp4"><img src="./college_files/15.jpg" alt=""><div class="fade"><span class="text">触漫学堂第15课——人设：辨识度</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/16.mp4"><img src="./college_files/16.jpg" alt=""><div class="fade"><span class="text">触漫学堂第16集——人设：头身比</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/18.mp4"><img src="./college_files/18.jpg" alt=""><div class="fade"><span class="text">触漫学堂第18课——故事的结构II（待审）</span></div></div></div><div class="swiper-slide clearfix" style="width: 1200px;"><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/19.mp4"><img src="./college_files/19.jpg" alt=""><div class="fade"><span class="text">触漫学堂第19课——什么是分镜</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/20.mp4"><img src="./college_files/20.jpg" alt=""><div class="fade"><span class="text">触漫学堂第20课——故事的矛盾设定</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/21+27.mp4"><img src="./college_files/21+27.jpg" alt=""><div class="fade"><span class="text">触漫学堂第21+27课——空杯方法论的人物设置练习</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/22.mp4"><img src="./college_files/22.jpg" alt=""><div class="fade"><span class="text">触漫学堂第23课——一句话概要</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/23.mp4"><img src="./college_files/23.jpg" alt=""><div class="fade"><span class="text">触漫学堂第24课——人物弧光I</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/24.mp4"><img src="./college_files/24.jpg" alt=""><div class="fade"><span class="text">触漫学堂第25课——人物弧光II</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/25.mp4"><img src="./college_files/25.jpg" alt=""><div class="fade"><span class="text">触漫学堂第26课——透视概念</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/26.mp4"><img src="./college_files/26.jpg" alt=""><div class="fade"><span class="text">触漫学堂第28课——漫画分镜格式</span></div></div></div><div class="swiper-slide clearfix" style="width: 1200px;"><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/28.mp4"><img src="./college_files/28.jpg" alt=""><div class="fade"><span class="text">触漫学堂第29课——分镜视角</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/29.mp4"><img src="./college_files/29.jpg" alt=""><div class="fade"><span class="text">触漫学堂第30课——角色的情感投射</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/30.mp4"><img src="./college_files/30.jpg" alt=""><div class="fade"><span class="text">触漫学堂第31课——条漫分镜的张力</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/31.mp4"><img src="./college_files/31.jpg" alt=""><div class="fade"><span class="text">触漫学堂第32课——分镜节奏</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/32.mp4"><img src="./college_files/32.jpg" alt=""><div class="fade"><span class="text">触漫学堂第33课故事的情节冲突</span></div></div><div class="ImgBox" data_url="https://qnp.chumanapp.com/chumanOfficialVideo/33.mp4"><img src="./college_files/33.jpg" alt=""><div class="fade"><span class="text">触漫学堂第34课——故事的人物冲突</span></div></div></div></div>
          <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
          <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div>
          <div class="swiper-button-prev swiper-button-disabled" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="true"></div>
        </div>
      </div>
      <div class="yhsp">
        <div class="title"><span>用户视频</span></div>
        <div class="slideBox">
          <div id="swiper2" class="swiper-container swiper-container-initialized swiper-container-horizontal">
            <div class="swiper-wrapper" id="yhsp" style="transform: translate3d(0px, 0px, 0px);">
              <!--<div class="swiper-slide clearfix">-->
              <!--<div class="ImgBox">-->
              <!--<img src="./img/black_swan.png" alt="">-->
              <!--<div class="fade"><span class="text">漫画制作导论</span></div>-->
              <!--</div>-->
              <!--<div class="ImgBox">-->
              <!--<img src="./img/black_swan.png" alt="">-->
              <!--<div class="fade"><span class="text">漫画制作导论</span></div>-->
              <!--</div>-->
              <!--<div class="ImgBox">-->
              <!--<img src="./img/black_swan.png" alt="">-->
              <!--<div class="fade"><span class="text">漫画制作导论</span></div>-->
              <!--</div>-->
              <!--<div class="ImgBox">-->
              <!--<img src="./img/black_swan.png" alt="">-->
              <!--<div class="fade"><span class="text">漫画制作导论</span></div>-->
              <!--</div>-->
              <!--<div class="ImgBox">-->
              <!--<img src="./img/black_swan.png" alt="">-->
              <!--<div class="fade"><span class="text">漫画制作导论</span></div>-->
              <!--</div>-->
              <!--<div class="ImgBox">-->
              <!--<img src="./img/black_swan.png" alt="">-->
              <!--<div class="fade"><span class="text">漫画制作导论</span></div>-->
              <!--</div>-->
              <!--<div class="ImgBox">-->
              <!--<img src="./img/black_swan.png" alt="">-->
              <!--<div class="fade"><span class="text">漫画制作导论</span></div>-->
              <!--</div>-->
              <!--<div class="ImgBox">-->
              <!--<img src="./img/black_swan.png" alt="">-->
              <!--<div class="fade"><span class="text">漫画制作导论</span></div>-->
              <!--</div>-->
              <!--</div>-->
            <div class="swiper-slide clearfix swiper-slide-active" style="width: 1200px;"><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_336992_f4813001b0784d6f9e8bd3a08ef3393d.mp4"><img src="./college_files/1.png" alt=""><div class="fade"><span class="text">如何在漫剧之中制作动画一样的字幕效果！</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_30120842_ef638a0e69314ce9996eee92787f4f9e.mp4"><img src="./college_files/2.png" alt=""><div class="fade"><span class="text">《出道，拜托了》出道曲《D.A.O》MV</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_16010881_e70d3c281af34aafa0b8488443d89bc9.mp4"><img src="./college_files/3.png" alt=""><div class="fade"><span class="text">【洛凡书小课堂】用触漫做侧脸人物</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_16010881_4078e5032f9842a0ad268c89c31adf1f.mp4"><img src="./college_files/4.png" alt=""><div class="fade"><span class="text">【洛凡书小课堂】用触漫做带有自定义的精美校园封面</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_1064274_c455b99764164e8481c68ce9ebd14b81.mp4"><img src="./college_files/5.png" alt=""><div class="fade"><span class="text">如何不用P图也可以改人物嘴型^O^</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_4006286_6d430aac109c45d995fc426443411ce2.mp4"><img src="./college_files/6.png" alt=""><div class="fade"><span class="text">【简单封面小教程】ｸﾞｯ!✧</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_1499452_7d6f06e405c640499007b03c1d747359.mp4"><img src="./college_files/7.png" alt=""><div class="fade"><span class="text">【简单素锦封】因为时间不够所以没有把擦完之后的全部录下来，每个字擦一两画就行，然后就做好啦ᙏ̤̫͚</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_7926906_f5acda8659264c449d1b5801c2068c3d.mp4"><img src="./college_files/8.png" alt=""><div class="fade"><span class="text">【颜像立体字】接上个视频</span></div></div></div><div class="swiper-slide clearfix swiper-slide-next" style="width: 1200px;"><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_34919769_8f5425a81db847ddb14fdff217b5279f.mp4"><img src="./college_files/9.png" alt=""><div class="fade"><span class="text">原谅我渣渣的技术，做视频做了好久唉🌚，后面可以跳过😂然后还想学什么下方留言，如果我会的我就录教程</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_4952229_88efdee21ac240889b6e6c1aa59494ef.mp4"><img src="./college_files/10.png" alt=""><div class="fade"><span class="text">因为时间太短，所以比较简洁。完全版可以私聊我</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_11052576_3f0f1a034f0e49c9849d3cd0c832952d.mp4"><img src="./college_files/11.png" alt=""><div class="fade"><span class="text">如何简单制作画面光效(无需p图)</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_1518905_7d335026df6f427a9ec3a25f15e90c9d.mp4"><img src="./college_files/12.png" alt=""><div class="fade"><span class="text">星空√ 发光图层每个软件效果都不太一样，做一些微调就可以ヘ(￣ω￣ヘ)♪ 字丑可能看不懂😂😂😂</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_29065425_5f235fd220d3449e8cb770e8b17408db.mp4"><img src="./college_files/13.png" alt=""><div class="fade"><span class="text">简单易懂的动作变换</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_3558575_8ebd4d9208ca407282f2d8a95ea4736b.mp4"><img src="./college_files/14.png" alt=""><div class="fade"><span class="text">【染湘渣画-日常篇4】撸了一个泳装小姐姐，好像花了五、六个小时(ヽ´ω`)按照惯例，求约稿！！</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_8872371_72b82256c4a8495bb27b4f91dd3b393b.mp4"><img src="./college_files/15.png" alt=""><div class="fade"><span class="text">超级简单的字效教程需要ps软件就可以了</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_1662501_690429a9995a47aaa24bbd67fff146cd.mp4"><img src="./college_files/16.png" alt=""><div class="fade"><span class="text">〔闪电教程〕背景倒置两长页连接，情感推动up!</span></div></div></div><div class="swiper-slide clearfix" style="width: 1200px;"><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_1662501_ac5238ee751d450f9b3515dc9eb5023a.mp4"><img src="./college_files/17.png" alt=""><div class="fade"><span class="text">〔闪电教程〕晨昏效果制作</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_4816664_1572df4d156344aaaaf38449887a8348.mp4"><img src="./college_files/18.png" alt=""><div class="fade"><span class="text">口胡了……今天感冒见谅。然后如果反应好下一次再出教程哦</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_3391802_0278041ab51a0f93b9817202e8f9a3ae.mp4"><img src="./college_files/19.png" alt=""><div class="fade"><span class="text">P图软件：picsart美易 抠图软件：proknockout ♡</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_2173361_1dbbe9b4a5e8edb3d8ba5466ab79dea6.mp4"><img src="./college_files/20.png" alt=""><div class="fade"><span class="text">这个教程是教不会指写的人，软件名叫MediBang，希望你们能学会，等会我发渐变指写怎么做。</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_2091676_c0e6aa65e86948a291d1b7f44f5d186f.mp4"><img src="./college_files/21.png" alt=""><div class="fade"><span class="text">【本式课堂】 第一课:如何用触漫素材改变人物瞳色 (*ﾟｪﾟ*)有些字没咬清楚很抱歉昂qwq</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_4005976_57ccccfa00884cab8ba20761d97e43ee.mp4"><img src="./college_files/22.png" alt=""><div class="fade"><span class="text">解决漫剧自制图中遇到的小问题技巧</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_30971051_47f49fe38bca4494b3c4232adf0ae4f3.mp4"><img src="./college_files/23.png" alt=""><div class="fade"><span class="text">字设的教程</span></div></div><div class="ImgBox" data_url="http://qnv.chumanapp.com/app/school/video/school_video_1518905_d786e0ebab244d37af128105110fa863.mp4"><img src="./college_files/24.png" alt=""><div class="fade"><span class="text">画个同人大头~ 这个是给若妈的同人</span></div></div></div></div>
          <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
          <div class="swiper-button-next1" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div>
          <div class="swiper-button-prev1 swiper-button-disabled" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="true"></div>
        </div>
      </div>

      <div class="ab_box">
        <div class="closeBox"></div>
        <div class="videoBox">
          <span class="title">漫画创作导论</span>
          <div id="myVideo" style="width: 1200px; height: 675px;"></div>
          <!--<video v-else playsinline webkit-playsinline  class="video video-js vjs-big-play-centered" ref="courseVideo" ></video>-->
        </div>
      </div>

      <div class="allBottom" style="position: relative;">
        <div class="bottomContent">
          <a class="map" href="https://chumanapp.com/sitemap.html">网站地图</a>
          <a class="xy" href="https://chumanapp.com/platformRules.html">触漫用户协议</a>
          <a class="ys" style="margin-right: 15px;" href="https://chumanapp.com/platformRulesPrivacy.html">隐私政策</a>
          <a class="xy" href="https://chumanapp.com/guidelines.html">版权保护投诉指引</a>
          <a class="ys" href="https://chumanapp.com/platformlegalRule.html">平台规则</a>
          <p style="margin: 25px 0;">广州梦映动漫网络科技有限公司</p>

          <p>
            触漫·梦映动漫版权所有©2016
            <a href="http://www.beian.miit.gov.cn/">粤ICP备16013509号-2</a>&nbsp;&nbsp;&nbsp;&nbsp;粤网文[2019]1860-435号
            <a style="margin-left: 20px; cursor: text;">增值电信业务经营许可证:粤B2-20170425
            </a>
            <a style="margin-left: 20px; cursor: text;">出版物经营许可证 ：新出发粤穗零字第H495号
            </a>
            <a target="_bank" style="margin-left: 20px;" href="http://qnp.chumanapp.com/m/common/img/business_license.png">营业执照</a>
          </p>

          <div style="width: 300px; margin: 0 auto; padding: 20px 0;">
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44010502000931" style="
                display: inline-block;
                text-decoration: none;
                height: 20px;
                line-height: 20px;
              "><p style="
                  float: left;
                  height: 20px;
                  line-height: 20px;
                  margin: 0px 0px 0px 5px;
                  color: #939393;
                ">
                <img style="vertical-align: -3px; margin-right: 5px;" src="./college_files/policeIcon.png" alt="">粤公网安备 44010502000931号
              </p></a>
          </div>
        </div>
        <div style="position: absolute; bottom: 0; left: 0;">
          <a href="http://home.chumanapp.com/">悬疑</a>
          <a href="http://xiaoyuan.chumanapp.com/Web/Index/index/tag_id/campus.html">校园</a>
          <a href="http://lianai.chumanapp.com/Web/Index/index/tag_id/love.html">恋爱</a>
          <a href="http://gufeng.chumanapp.com/Web/Index/index/tag_id/fantasy.html">古风</a>
          <a href="http://xiandai.chumanapp.com/Web/Index/index/tag_id/city.html">现代</a>
          <a href="http://danmei.chumanapp.com/Web/Index/index/tag_id/bl.html">耽美</a>
        </div>
      </div>
    </div>
    <div style="display: none;" class="bigBody">
      <div class="downloadCon">
        <a href="https://chumanapp.com/m_legal.html" class="wqzxBtn"></a>
        <a href="https://chumanapp.com/m_painterUpLoad.html" class="hsrzBtn"></a>
        <a href="https://qnp.chumanapp.com/grouplist/" class="rmjzBtn"></a>
        <img src="./college_files/new-wap_2019.png" title="触漫-超好玩的泛二次元创作社区">
        <div class="phoneBox">
          <div id="wapVideo">
            <video id="video_wap" loop="" autoplay="" preload="auto" poster="./img/video.png" playsinline="" webkit-playsinline="" x5-playsinline="">
              <source src="./img/chuman2.mp4" type="video/mp4">
            </video>
          </div>
        </div>
        <a class="downBtn" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.mallestudio.gugu.app">免费下载</a>
        <div class="wap-copyright">
          <p>客服热线：400-968-3988</p>
          <p>每天 8:00-22:00</p>
          <p>版权所有©2016 触漫. 梦映动漫.</p>
          <p>广州梦映动漫网络科技有限公司</p>
          <p>粤ICP备16013509号-2 粤网文[2019]1860-435号</p>
          <!--  <p>友情链接：<a href="http://pro.25pp.com/?from=pp_pz" target="_blank">PP助手</a><a href="http://r.pconline.com.cn/" target="_blank">太平洋手机软件下载</a></p> -->
        </div>
      </div>
    </div>

    <script type="text/javascript" src="./college_files/jweixin-1.3.2.js.下载"></script>
    <script src="./college_files/hash.js.下载"></script>
    <script src="./college_files/qiniuplayer.min.js.下载"></script>
    <!--<script src="https://sdk-release.qnsdk.com/qiniu-web-player-1.0.0.js"></script>-->
    <script src="./college_files/data.js.下载"></script>
    <script src="./college_files/jquery-1.11.1.min.js.下载"></script>
    <script src="./college_files/swiper.js.下载"></script>
    <script>
      var browser = {
        versions: (function () {
          var u = navigator.userAgent,
            app = navigator.appVersion
          return {
            //移动终端浏览器版本信息
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
          }
        })(),
        language: (
          navigator.browserLanguage || navigator.language
        ).toLowerCase(),
      }
      if (browser.versions.mobile) {
        console.log('移动端')
        $('.bigBody').show()
        $('.pcBody').hide()
        $('body').css('margin-top', '0')
        var video = document.getElementById('video')
        video.pause()

        $('.downloadCon').click(function () {
          var video_wap = document.getElementById('video_wap')
          video_wap.play()
        })
        window.onscroll = function () {
          var video_wap = document.getElementById('video_wap')
          video_wap.play()
        }
        document.addEventListener(
          'WeixinJSBridgeReady',
          function () {
            var video_wap = document.getElementById('video_wap')
            video_wap.play()
          },
          false
        )
      } else {
        console.log('PC端')
        $('.bigBody').hide()
        $('.pcBody').show()
        var video_wap = document.getElementById('video_wap')
        video_wap.pause()
        $('body').click(function () {
          var video = document.getElementById('video')
          video.play()
        })
        window.onscroll = function () {
          var video = document.getElementById('video')
          video.play()
        }
      }
      window.onload = function () {
        var GFVideoText = ''
        for (var i = 0; i < gfVideoTitle.length; i++) {
          var GFvideoL = ''

          for (var j = 0; j < gfVideoTitle[i].title.length; j++) {
            GFvideoL +=
              '<div class="ImgBox" data_url="' +
              gfVideoUrl[i].url[j] +
              '">' +
              '<img src="' +
              gfVideoPic[i].src[j] +
              '" alt="">' +
              '<div class="fade"><span class="text">' +
              gfVideoTitle[i].title[j] +
              '</span></div>' +
              '</div>'
          }
          GFVideoText +=
            '<div class="swiper-slide clearfix">' + GFvideoL + '</div>'
        }
        $('#gfsp').append(GFVideoText)

        var swiper = new Swiper('#swiper1', {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        })

        var VideoText = ''
        for (var i = 0; i < userVideoTitle.length; i++) {
          var videoL = ''

          for (var j = 0; j < userVideoTitle[i].title.length; j++) {
            videoL +=
              '<div class="ImgBox" data_url="' +
              userVideoUrl[i].url[j] +
              '">' +
              '<img src="' +
              userVideoPic[i].src[j] +
              '" alt="">' +
              '<div class="fade"><span class="text">' +
              userVideoTitle[i].title[j] +
              '</span></div>' +
              '</div>'
          }
          VideoText += '<div class="swiper-slide clearfix">' + videoL + '</div>'
        }
        $('#yhsp').append(VideoText)
        var swiper1 = new Swiper('#swiper2', {
          navigation: {
            nextEl: '.swiper-button-next1',
            prevEl: '.swiper-button-prev1',
          },
        })

        var player
        function initVideo(url) {
          player = new QPlayer({
            url: url,
            //                    url: 'http://7u2kln.com2.z0.glb.qiniucdn.com/app/academy/video/share/152723368600081.m3u8',
            container: document.getElementById('myVideo'),
            loggerLevel: 2,
            autoplay: true,
          })
        }
        //        initVideo()
        $('.ImgBox').click(function () {
          $('.ab_box').show()
          var url = $(this).attr('data_url')
          initVideo(url)
        })

        $('.closeBox').click(function () {
          player.destroy()
          $('.ab_box').hide()
        })
      }
    </script>
  

</body></html>
